const EslintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

const getStyleLoader = (options) =>{
    return [
        "style-loader",
        "css-loader",
        options,
        {
            options: {
                //处理CSS兼容性，配合package.json中的browserslist来指定兼容性程度
                postcssOptions: {
                    plugins: ["postcss-preset-env"],
                }
            }
        }
    ].filter(Boolean)
}

module.exports = {
    //入口文件，从那个开始打包
    entry: './src/main.js',
    output: {
        path: undefined, //打包到哪里
        filename: 'static/js/{name}.js', //将import文件打包到chunk
        chunkFilename: "static/js/{name}.chunk.js", //将静态文件打包到media中
        assetModuleFilename: "static/media/[hash:10][ext][query]"
    },
    module: {
        //打包规则
        rules:[
            //处理css资源
            {
                test: /\.css$/i,
                use: getStyleLoader(),
            },
            //处理less资源
            {
                test: /\.less$/i,
                use: getStyleLoader("less-loader"),
            },
            //处理sass资源
            {
                test: /\.s[ac]ss$/i,
                use: getStyleLoader("sass-loader"),
            },
            //处理stylus资源
            {
                test: /\.styl$/i,
                use: getStyleLoader("stylus-loader"),
            },
            //处理图片资源
            {
                test:/\.(jpe?g|png|gif|webg|svg)/,
                type:"asset",
                parser:{
                    dataUrlCondition:{
                        maxSize:10*1024,
                    }
                }
            },
            //处理其他资源
            {
                test:/\.(woff2?|tff)/,
                type:"asset/resource"
            },
            //处理js资源
            {
                //处理jsx，让react使用更方便
                test:/\.jsx?$/,
                include:path.resolve(__dirname,"../src"),
                loader:"babel-loader",
                options:{
                    //开启缓存
                    cacheDirectory:true,
                    //缓存不压缩，加快打包速度
                    cacheCompression:false,
                }
            }
        ]
    },
    plugins:[
        //处理html
        new EslintWebpackPlugin({
            context:path.resolve(__dirname, "../src"),
            exclude:"node_modules",
            //开启缓存
            cache:true,
            //缓存存放位置
            cacheLocation:path.resolve(__dirname,"../node_modules/.cache/.eslintcache")
        }),
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,"../public/index.html"),
        })
    ],
    //模式为开发模式
    mode:"development",
    //方便与调试
    devtool:"cheap-module-source-map",
    //创建chunk避免打包进一个文件
    optimization:{
        splitChunks:{
            chunks:"all"
        },
        //防止缓存失效
        runtimeChunk:{
            name:(entrypoint) => `runtime~{entrypoint.name}`
        }
    },
    //代理服务器
    devServer:{
        host:"localhost",
        //端口号
        port:80,
        open:true,
        hot:true,
    }
}